import React, { Component } from 'react'
import { _verificationCode } from '../common/Api';
// import { Icon } from 'antd';

// const IconFont = Icon.createFromIconfontCN({
//     scriptUrl: 'http://at.alicdn.com/t/font_1616893_8wmkros6kac.js',
// });

export default class VerifyImageShow extends Component {
    constructor(props) {
        super(props);

        this.state = {
            verifyImage: null,
            isMouse: false,
            loading: false
        }
        this.getVerificationCode()
        this.getVerificationCode = this.getVerificationCode.bind(this)
    }

    handleClick = () => {
        this.setState({
            loading: true
        });

        this.getVerificationCode()
    }

    // 获取验证码接口
    async getVerificationCode() {
        const res = await _verificationCode();

        if (res.data.code === 0) {
            this.setState({
                verifyImage: res.data.data,
                loading: false
            });
        }
    }

    handleMouseOver = () => {
        this.setState({
            isMouse: true
        });
    }

    handleMouseOut = () => {
        this.setState({
            isMouse: false
        });
    }

    render() {
        return (
            <div
                style={{
                    position: 'relative',
                    width: 150,
                    height: 50,
                    cursor: 'pointer'
                }}
                onMouseOver={this.handleMouseOver}
                onMouseOut={this.handleMouseOut}
                onClick={this.handleClick}
            >
                <img src={this.state.verifyImage} alt="验证码" style={{
                    width: 150,
                    height: 50,
                    position: 'absolute',
                    left: 0,
                    zIndex: 3
                }} />
                <div style={{
                    position: 'absolute',
                    width: 150,
                    height: 50,
                    left: 0,
                    backgroundColor: '#fff',
                    opacity: (this.state.isMouse ? 0.7 : 0),
                    zIndex: 4
                }}></div>
                <span
                    className="anticon-portal anticonjiazai"
                    style={{
                        position: 'absolute',
                        zIndex: 6,
                        fontSize: 40,
                        color: '#fff',
                        transitionDuration: '.5s',
                        transform: (this.state.loading ? 'rotate(180deg)' : 'rotate(0deg)'),
                        opacity: (this.state.isMouse ? 1 : 0),
                        margin: '5px 55px'
                    }}
                    fill='#fff'
                ></span>
            </div>
        )
    }
}
